<template>
  <div class="wechat-material">
    <!-- 头部操作栏 -->
    <div class="header-actions">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><h2 style="color: #333;">微信素材管理</h2></el-breadcrumb-item>
      </el-breadcrumb>
      <div class="actions">
   
        <!-- <el-upload
          :action="uploadUrl"
          :headers="uploadHeaders"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :before-upload="beforeUpload"
          :show-file-list="false"
          :auto-upload="true"
          class="upload-btn"
        >
          <el-button type="primary" :icon="Upload">上传素材</el-button>
        </el-upload>
        <el-dropdown @command="handleBatchAction">
          <el-button :icon="MoreFilled" type="default">批量操作</el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="batchDelete"
                >批量删除</el-dropdown-item
              >
              <el-dropdown-item command="batchDownload"
                >批量下载</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->
      </div>
    </div>

    <!-- 搜索筛选区 -->
    <div class="search-filters" style="display: flex;justify-content: space-between;">
      <el-button type="primary" @click="handleAddClick">新增素材</el-button>
      <el-form :inline="true" :model="searchForm" class="filter-form">
        <el-form-item label="素材类型">
          <el-select v-model="searchForm.type" placeholder="请选择素材类型" style="width: 120px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="缩略图" value="thumb"></el-option>
            <el-option label="图片" value="image"></el-option>
            <el-option label="视频" value="video"></el-option>
            <el-option label="图文" value="news"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="素材名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入素材名称"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="上传日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          ></el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :icon="Search"
            >搜索</el-button
          >
          <el-button @click="resetSearch" :icon="RefreshLeft">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 素材列表 -->
    <div class="material-list">
      <el-card
        shadow="hover"
        v-for="item in materials"
        :key="item.media_id"
        class="material-card"
      >
        <div class="card-content">
          <!-- 素材预览 -->
          <div class="material-preview" @click="viewMaterial(item)">
            <template v-if="item.material_type === 'image'">
              <el-image :src="$imageBaseUrl +  item.material_cover" fit="cover" lazy></el-image>
              <div class="video-icon">
                  <el-icon class="el-icon--big"><Picture /></el-icon>
              </div>
            </template>
            <template v-else-if="item.material_type === 'video'">
              <div class="video-preview">
                <el-image
                  :src="$imageBaseUrl+ item.material_cover"
                  fit="cover"
                ></el-image>
                <div class="video-icon">
                  <el-icon class="el-icon--big"><VideoPlay /></el-icon>
                </div>
                <div class="video-duration">
                  {{ formatDuration(item.duration) }}
                </div>
              </div>
            </template>
            <template v-else-if="item.material_type === 'news'">
              <div class="news-preview">
                <el-image :src="$imageBaseUrl + item.material_cover" fit="cover" lazy></el-image>
                <div class="news-title">{{ item.material_name }}</div>
                <div class="news-icon">
                  <el-icon class="el-icon--big"><Document /></el-icon>
                </div>
              </div>
            </template>
          </div>

          <!-- 素材信息 -->
          <div class="material-info">
            <div class="material-name">
              {{ item.material_name || "未命名素材" }}
            </div>
            <div class="material-meta">
              <span class="meta-item">{{ getTypeLabel(item.material_type) }}</span>
              <span class="meta-item">{{ formatFileSize(item.material_size) }}</span>
              <span class="meta-item">{{ formatDate(item.ctime) }}</span>
            </div>

            <!-- 操作按钮 -->
            <div class="material-actions">
              <el-button size="small"  @click="viewMaterial(item)"
                >查看</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="deleteMaterial(item)"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[12, 24, 36, 48]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 查看素材弹窗 -->
    <el-dialog v-model="dialogs.viewVisible" title="查看素材" width="800px">
      <div class="view-dialog">
        <template v-if="['thumb', 'image'].includes(currentMaterial.material_type)">
          <el-image
            :src="$imageBaseUrl + currentMaterial.media_url"
            fit="contain"
            class="preview-image"
          ></el-image>
        </template>
        <template v-else-if="currentMaterial.material_type === 'video'">
          <video
            :src="currentMaterial.down_url"
            controls
            class="preview-video"
          ></video>
        </template>
        <template v-else-if="currentMaterial.material_type === 'voice'">
          <audio
            :src="currentMaterial.url"
            controls
            class="preview-voice"
          ></audio>
        </template>
        <template v-else-if="currentMaterial.material_type === 'news'">
          <div class="news-content">
            <h2>{{ currentMaterial.material_name }}</h2>
            <div class="news-meta">
              {{ currentMaterial.author || '未知作者' }} |
              {{ formatDate(currentMaterial.ctime) }}
            </div>
            <el-image
              :src="$imageBaseUrl + currentMaterial.material_cover"
              fit="cover"
              class="news-thumb"
            ></el-image>
            <div class="news-description">
              {{ currentMaterial.summary || currentMaterial.material_description }}
            </div>
            <div v-html="currentMaterial.content || ''" class="news-body"></div>
          </div>
        </template>

        <div class="material-details">
          <h3>素材详情</h3>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="素材ID">{{
              currentMaterial.media_id
            }}</el-descriptions-item>
            <el-descriptions-item label="素材名称">{{
              currentMaterial.material_name || "未命名素材"
            }}</el-descriptions-item>
            <el-descriptions-item label="素材类型">{{
              getTypeLabel(currentMaterial.material_type)
            }}</el-descriptions-item>
            <el-descriptions-item label="文件大小">{{
              formatFileSize(currentMaterial.material_size)
            }}</el-descriptions-item>
            <el-descriptions-item label="上传时间">{{
              formatDate(currentMaterial.ctime)
            }}</el-descriptions-item>
            <el-descriptions-item
              label="更新时间"
              v-if="currentMaterial.utime"
              >{{
                formatDate(currentMaterial.utime)
              }}</el-descriptions-item
            >
            <el-descriptions-item label="URL链接"
              ><a :href="currentMaterial.url" target="_blank">{{
                currentMaterial.url
              }}</a></el-descriptions-item
            >
          </el-descriptions>
        </div>
      </div>
    </el-dialog>
    <!-- 新增素材弹窗 -->
    <el-dialog v-model="dialogs.addVisible" title="新增素材" width="600px" >
      <el-form
        :model="addForm"
        :rules="addRules"
        ref="addFormRef"
        label-width="100px"
      >
        <el-form-item label="素材类型" prop="material_type">
          <el-radio-group v-model="addForm.material_type">
            <el-radio label="image">图片</el-radio>
            <el-radio label="thumb">缩略图</el-radio>
            <el-radio label="video">视频</el-radio>
            <el-radio label="news">图文</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 素材封面 -->
        <el-form-item label="素材封面" prop="material_cover">
           <el-upload
            class="avatar-uploader"
            :action="$uploadUrl"
            :show-file-list="false"
            :on-success="handleSuccess"
            :headers="{
                Authorization: getToken()
            }"
            >
            <img
                v-if="addForm.material_cover"
                :src="$imageBaseUrl+ addForm.material_cover"
                class="avatar"
            />
        
            <i v-else class="icon iconfont icon-increase avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <template v-if="['image', 'thumb'].includes(addForm.material_type)">
          <el-form-item label="素材名称" prop="material_name">
            <el-input
              v-model="addForm.material_name"
              placeholder="请输入素材名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注信息" prop="material_description">
            <el-input
              v-model="addForm.material_description"
              type="textarea"
              placeholder="请输入备注信息"
            ></el-input>
          </el-form-item>
        </template>
        <template v-else-if="addForm.material_type === 'video'">
          <el-form-item label="视频标题" prop="material_name">
            <el-input
              v-model="addForm.material_name"
              placeholder="请输入视频标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="视频备注" prop="material_description">
            <el-input
              v-model="addForm.material_description"
              type="textarea"
              placeholder="请输入备注信息"
            ></el-input>
          </el-form-item>
        </template>
        <template v-else-if="addForm.material_type === 'news'">
          <el-form-item label="文章标题" prop="material_name">
            <el-input
              v-model="addForm.material_name"
              placeholder="请输入文章标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input
              v-model="addForm.author"
              placeholder="请输入作者"
            ></el-input>
          </el-form-item>
          <el-form-item label="摘要" prop="summary">
            <el-input
              v-model="addForm.summary"
              type="textarea"
              placeholder="请输入文章摘要"
            ></el-input>
          </el-form-item>

        </template>
        <el-form-item label="图片" prop="material_image" v-if="['image', 'thumb'].includes(addForm.material_type)">
          <el-upload
            ref="imageUpload"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :data="{...addForm}"
            :on-success="handleAvatarSuccess"
            :auto-upload="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频" prop="material_video" v-if="addForm.material_type === 'video'">
          <el-upload
            ref="videoUpload"
            class="avatar-uploader"
            :action="uploadUrl"
            :data="{...addForm}"
            :headers="uploadHeaders"
            :on-success="handleAvatarSuccess"
            :auto-upload="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="图文内容" prop="material_news" v-if="addForm.material_type === 'news'">
          <el-upload
            ref="newsUpload"
            class="avatar-uploader"
            :action="uploadUrl"
            :data="{...addForm}"
            :headers="uploadHeaders"
            :on-success="handleAvatarSuccess"
            :auto-upload="false"
          >
            <el-button size="small" type="primary">点击上传图文</el-button>
          </el-upload>
        </el-form-item>
   
      </el-form>
      <template #footer>
        <el-button @click="dialogs.addVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddForm">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import {
  Upload,
  Search,
  RefreshLeft,
  MoreFilled,
  VideoPlay,
  Microphone,
  Picture,
  Document
} from "@element-plus/icons-vue";
import {  getToken } from "@/utils/sys";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $http, $ekMessage, $ekMessageBox,$uploadUrl, $imageBaseUrl} = globalProperties;

// 上传配置
const uploadUrl = "/business/material/add?authCode=BTN_WECHAT_MATERIAL_ADD";
const uploadHeaders = reactive({
  authorization: getToken(),
});

// 搜索表单
const searchForm = reactive({
  type: "",
  name: "",
  dateRange: [],
});

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 12,
  total: 0,
});

// 素材列表
const materials = ref([]);

// 对话框状态
const dialogs = reactive({
  viewVisible: false,
  editVisible: false,
});

// 当前操作的素材
const currentMaterial = reactive({});

// 编辑表单
const editForm = reactive({});
const editFormRef = ref(null);
const editRules = {
  name: [{ required: true, message: "请输入素材名称", trigger: "blur" }],
};

// 获取素材列表
const fetchMaterials = async () => {
  try {
    const params = {
      type: searchForm.type,
      name: searchForm.name,
      start_date: searchForm.dateRange?.[0] || "",
      end_date: searchForm.dateRange?.[1] || "",
      page: pagination.currentPage,
      page_size: pagination.pageSize,
    };

    const res = await $http.get("business/material/getList?authCode=FUNCTION_WECHAT_MATERIAL", { params });
    if (res.status === "success") {
      materials.value = res.data.list || [];
      pagination.total = res.data.total || 0;
    }
  } catch (error) {
    console.error("获取素材列表失败:", error);
    $ekMessage.error("获取素材列表失败，请重试");

    // 使用模拟数据
    materials.value = generateMockData();
    pagination.total = materials.value.length;
  }
};

// 生成模拟数据
const generateMockData = () => {
  return [
    {
      media_id: "media_1234567890",
      name: "产品宣传图1",
      type: "image",
      url: "https://picsum.photos/800/600?random=1",
      size: 1024 * 512,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
      tags: ["产品", "宣传"],
      remark: "首页轮播图",
    },
    {
      media_id: "media_0987654321",
      name: "企业介绍视频",
      type: "video",
      url: "https://example.com/video.mp4",
      cover_url: "https://picsum.photos/800/600?random=2",
      size: 1024 * 1024 * 50,
      duration: 180,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
      tags: ["视频", "介绍"],
      remark: "企业宣传片",
    },
    {
      media_id: "media_5678901234",
      name: "客服语音提示",
      type: "voice",
      url: "https://example.com/voice.mp3",
      size: 1024 * 1024 * 2,
      duration: 30,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
      tags: ["语音", "客服"],
      remark: "自动回复语音",
    },
    {
      media_id: "media_4321098765",
      title: "物流行业新趋势",
      type: "news",
      url: "https://example.com/article.html",
      thumb_url: "https://picsum.photos/800/600?random=3",
      author: "管理员",
      description: "本文介绍了物流行业的最新发展趋势和创新技术应用",
      content: "<p>物流行业正在经历数字化转型...</p>",
      content_source_url: "https://example.com/original.html",
      size: 1024 * 100,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
      tags: ["文章", "行业"],
      remark: "行业资讯",
    },
    {
      media_id: "media_1122334455",
      name: "促销活动海报",
      type: "image",
      url: "https://picsum.photos/800/600?random=4",
      size: 1024 * 600,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
      tags: ["促销", "海报"],
      remark: "618促销活动",
    },
    {
      media_id: "media_5544332211",
      name: "员工培训视频",
      type: "video",
      url: "https://example.com/training.mp4",
      cover_url: "https://picsum.photos/800/600?random=5",
      size: 1024 * 1024 * 100,
      duration: 600,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
      tags: ["培训", "视频"],
      remark: "新员工入职培训",
    },
  ];
};

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1;
  fetchMaterials();
};

// 重置搜索
const resetSearch = () => {
  searchForm.type = "";
  searchForm.name = "";
  searchForm.dateRange = [];
  pagination.currentPage = 1;
  fetchMaterials();
};

// 分页大小变化
const handleSizeChange = (size) => {
  pagination.pageSize = size;
  fetchMaterials();
};

// 页码变化
const handleCurrentChange = (current) => {
  pagination.currentPage = current;
  fetchMaterials();
};

// 上传前检查
const beforeUpload = (file) => {
  const fileTypes = [
    "image/jpeg",
    "image/jpg",
    "image/png",
    "image/gif",
    "video/mp4",
    "audio/mp3",
    "audio/mpeg",
  ];
  const maxSize = 100 * 1024 * 1024; // 100MB

  if (!fileTypes.includes(file.type)) {
    $ekMessage.error("请上传支持的文件格式(jpg/png/gif/mp4/mp3)");
    return false;
  }

  if (file.size > maxSize) {
    $ekMessage.error("文件大小不能超过100MB");
    return false;
  }

  return true;
};

// 上传成功
const handleUploadSuccess = async (response, file, fileList) => {
  if (response.status === "success") {
    $ekMessage.success("素材上传成功");
    fetchMaterials();
  } else {
    $ekMessage.error(response.message || "素材上传失败");
  }
};

// 上传失败
const handleUploadError = (error, file, fileList) => {
  console.error("上传失败:", error);
  $ekMessage.error("素材上传失败，请重试");
};



/* 新增素材表单 */
const addForm = reactive({
  material_type: "image",
  material_name: "",
  material_description: "",
  material_cover: ""
});
const addFormRef = ref(null);
const addRules = reactive({
  material_type: [{ required: true, message: "请选择素材类型", trigger: "blur" }],
  material_name: [{ required: true, message: "请输入素材名称", trigger: "blur" }],
  material_description: [
    { required: true, message: "请输入备注", trigger: "blur" }
  ],
  material_cover: [{ required: true, message: "请上传素材封面", trigger: "change" }]
});

const imageUpload = ref(null);
const videoUpload = ref(null);
const newsUpload = ref(null);
// 新增素材点击
const handleAddClick = () => {
  addForm.material_type = "image";
  addForm.material_name = "";
  addForm.material_description = "";
  addForm.material_cover = "";
  dialogs.addVisible = true;
};
const handleSuccess = (res) => {
    console.log(res)
   if (res.status === "success") {
       addForm.material_cover = res.data.path
    }
}


const submitAddForm = async () => {
  try {
    await addFormRef.value.validate();
    if(addForm.material_type === 'image'){
      await imageUpload.value.submit();
    }
    if(addForm.material_type === 'video'){
      await videoUpload.value.submit();
    }
    if(addForm.material_type === 'news'){
      await newsUpload.value.submit();
    }
  } catch (error) {
    console.error("验证失败:", error);
  }
};


/* 新增素材表单结束 */


// 查看素材
const viewMaterial = async (material) => {
  Object.assign(currentMaterial, material);
  if(material.material_type === 'video'){
      
    const res = await $http.post("/business/material/detail?authCode=BTN_WECHAT_MATERIAL_DETAIL", {
      id: material.id,
    });
    if (res.status === "success") {
      Object.assign(currentMaterial, material, res.data);
    }
  }
  dialogs.viewVisible = true;
};

// 编辑素材
const editMaterial = (material) => {
  Object.assign(currentMaterial, material);
  Object.assign(editForm, {
    name: material.name || material.title || "",
    tags: material.tags?.join(",") || "",
    remark: material.remark || "",
  });
  dialogs.editVisible = true;
};


// 提交编辑表单
const submitEditForm = async () => {
  try {
   
    await editFormRef.value.validate();

    const params = {
      media_id: currentMaterial.media_id,
      name: editForm.name,
      tags: editForm.tags.split(",").filter((tag) => tag.trim()),
      remark: editForm.remark,
    };

    const res = await $http.post("/api/wechat/material/update", params);
    if (res.status === "success") {
      $ekMessage.success("素材更新成功");
      dialogs.editVisible = false;
      fetchMaterials();
    } else {
      $ekMessage.error(res.message || "素材更新失败");
    }
  } catch (error) {
    console.error("验证失败:", error);
  }
};

// 删除素材
const deleteMaterial = async (material) => {
  try {
    await $ekMessageBox.confirm(
      `确定要删除素材「${
        material.material_name || "未命名素材"
      }」吗？`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );

    const res = await $http.post("/business/material/del?authCode=BTN_WECHAT_MATERIAL_DEL", {
      media_id: material.media_id,
    });

    if (res.status === "success") {
      $ekMessage.success("素材删除成功");
      fetchMaterials();
    } else {
      $ekMessage.error(res.message || "素材删除失败");
    }
  } catch (error) {
    // 用户取消操作不做处理
  }
};

// 批量操作
const handleBatchAction = (command) => {
  // 这里可以实现批量操作逻辑
  if (command === "batchDelete") {
    $ekMessage.info("请先选择要删除的素材");
  } else if (command === "batchDownload") {
    $ekMessage.info("请先选择要下载的素材");
  }
};

// 下载素材
const downloadMaterial = (material) => {
  // 创建一个临时的a标签进行下载
  const link = document.createElement("a");
  link.href = material.url;
  link.download = material.name || material.title || "未命名素材";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  return date.toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
};

// 格式化文件大小
const formatFileSize = (size) => {
  if (!size) return "0 B";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(size) / Math.log(k));
  return (size / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
};

// 格式化时长
const formatDuration = (seconds) => {
  if (!seconds) return "00:00";
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins.toString().padStart(2, "0")}:${secs
    .toString()
    .padStart(2, "0")}`;
};

// 获取类型标签
const getTypeLabel = (type) => {
  const typeMap = {
    image: "图片",
    thumb: "缩略图",
    video: "视频",
    voice: "语音",
    news: "图文",
  };
  return typeMap[type] || "未知";
};

// 监听页面加载
onMounted(() => {
  fetchMaterials();
});
</script>

<style scoped lang="scss">

.wechat-material {
  padding: 15px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);

  // 头部操作栏
  .header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .actions {
      display: flex;
      gap: 10px;
    }
  }

  // 搜索筛选区
  .search-filters {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

    .filter-form {
      .el-form-item {
        margin-bottom: 0;
        margin-right: 15px;
      }
    }
  }

  // 素材列表
  .material-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;

    .material-card {
      transition: all 0.3s ease;
      border-radius: 8px;
      overflow: hidden;
      border: none;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
      }

      .card-content {
        .material-preview {
          width: 100%;
          height: 200px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          background-color: #f0f0f0;

          & img {
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease;
          }

          &:hover img {
            transform: scale(1.05);
          }

            .video-icon {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background-color: rgba(0, 0, 0, 0.5);
              width: 60px;
              height: 60px;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              color: white;
              opacity: 0.9;
            }
          .video-preview {
            position: relative;
            width: 100%;
            height: 100%;


            .video-duration {
              position: absolute;
              bottom: 10px;
              right: 10px;
              background-color: rgba(0, 0, 0, 0.7);
              color: white;
              padding: 2px 8px;
              border-radius: 4px;
              font-size: 12px;
            }
          }

          .voice-preview {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #e6f7ff;

            .voice-icon {
              font-size: 48px;
              color: #1890ff;
              margin-bottom: 10px;
            }

            .voice-duration {
              font-size: 16px;
              color: #333;
            }
          }

          .news-preview {
            position: relative;
            width: 100%;
            height: 100%;

            .news-title {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.7),
                transparent
              );
              color: white;
              padding: 15px 10px 10px;
              font-size: 14px;
              font-weight: 500;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }

        .material-info {
          padding: 15px;

          .material-name {
            font-size: 16px;
            margin-top: 8px;
            font-weight: 500;
            margin-bottom: 12px;
            color: #303133;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .material-meta {
            display: flex;
            gap: 15px;
            margin-bottom: 12px;
            font-size: 12px;
            color: #909399;

            .meta-item {
              display: flex;
              align-items: center;
            }
          }

          .material-actions {
            display: flex;
            justify-content: flex-end;
            gap: 5px;
            margin-top: 8px;
          }
        }
      }
    }
  }

  // 分页
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  // 查看对话框
  .view-dialog {
    max-height: 60vh;
    overflow-y: auto;

    .preview-image {
      width: 100%;
      max-height: 400px;
      margin-bottom: 20px;
    }

    .preview-video {
      width: 100%;
      max-height: 400px;
      margin-bottom: 20px;
    }

    .preview-voice {
      width: 100%;
      margin-bottom: 20px;
    }

    .news-content {
      margin-bottom: 20px;

      h2 {
        margin-bottom: 10px;
        color: #303133;
      }

      .news-meta {
        color: #909399;
        font-size: 14px;
        margin-bottom: 15px;
      }

      .news-thumb {
        width: 100%;
        max-height: 300px;
        margin-bottom: 15px;
      }

      .news-description {
        font-size: 14px;
        color: #606266;
        margin-bottom: 15px;
        line-height: 1.6;
      }

      .news-body {
        font-size: 14px;
        color: #303133;
        line-height: 1.8;

        img {
          max-width: 100%;
          margin: 10px 0;
        }

        p {
          margin-bottom: 10px;
        }
      }
    }

    .material-details {
      h3 {
        margin-bottom: 15px;
        color: #303133;
        font-size: 16px;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 10px;

    .header-actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
    }

    .search-filters {
      padding: 15px;

      .filter-form {
        .el-form-item {
          margin-right: 0;
          margin-bottom: 15px;
          width: 100%;
        }

        .el-form-item:last-child {
          margin-bottom: 0;
          display: flex;
          gap: 10px;
        }
      }
    }

    .material-list {
      grid-template-columns: 1fr;
    }

    .pagination {
      margin-top: 20px;
      padding: 0 10px;
    }
  }
}

:deep(.avatar-uploader) {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>

